<template>
    <div class="header">
        <div class="left-box">
            <div class="logo">
                <img src="../assets/img/banner.jpg" alt="" >
            </div>
            <p class="left-w">管理系统</p>
        </div>
        <div class="right-box" @click="exit">
            <!-- <div class="t-ico"></div> -->
            <p class="close">退出</p>
        </div>
    </div>
</template>
<script>
import {removeRoles,removeToken} from '@/utils/auth'
export default {
    data () {
        return {

        }
    },
    methods:{
        exit () {
            removeRoles();removeToken()
            this.$store.commit('Clean_list')
            this.$router.push('/')
        }
    }
}
</script>
<style lang="less" scoped>
    .header{
        width:100%;
        height: 100px;;
        border-bottom: 1px solid #ddd;
        box-sizing: border-box;
        padding:15px 30px;
        display: flex;
        justify-content: space-between;
        .left-box{
            display: flex;
            .logo{
                width:200px ;
                height: 70px;
                background-color: #ccc;
                img{
                    width:100%;
                    height: 100%;
                }
            }
            .left-w{
                font-size: 32px;
                color:#F55D54 ;
                margin-left: 16px;
                margin-top:35px;

            }
        }
        .right-box{
            display: flex;;
            align-items: center;
            cursor: pointer;
            .t-ico{
                width:45px;
                height: 40px;
                background-color:#E0E0E0;
            }
            .close{
                color: #F55D54;
                font-size: 20px;
                margin-right: 5px;
            }
        }
    }
</style>